<template>
  <el-main>
    <el-card shadow="never">
      <el-tabs tab-position="top">
        <el-tab-pane label="上传客户端文件">
          <el-form ref="form" :model="sys" label-width="100px" style="margin-top: 20px">
            <el-form-item label="vid">
              <sc-upload-file v-model="uploadData" :limit="1" drag @onSuccess="onSuccess">
                <el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
                <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
              </sc-upload-file>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div class="save-div">
        <el-button type="primary" @click="format">代码</el-button>
      </div>

      <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="result"></el-input>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'system',
  data() {
    return {
      sys: {
        vid: '',
      },
      result: '',
      uploadData: '',
    };
  },
  mounted() {},
  methods: {
    format() {
      var vid = this.sys.vid;
      this.result =
        '<script ' +
        `src='//player.polyv.net/script/polyvplayer.min.js'>` +
        '<//script>' +
        `\r\n <div id='plv_${vid}'></div> \r\n` +
        '<script>' +
        `\r\n var player = polyvObject('#plv_${vid}').videoPlayer \r\n ({ \r\n 'width':'1000', \r\n 'height':'562', \r\n 'vid' : '${vid}' \r\n }); \r\n` +
        '<//script>';
      this.result = this.result.replaceAll('//script', '/script');
    },
    onSuccess(data) {
      console.log(data);
    },
  },
};
</script>

<style>
</style>
